'use client';

import { useState, useEffect } from 'react';
import styled from 'styled-components';

// 样式组件
const AlertsContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
`;

const AlertsList = styled.div`
  flex: 1;
  overflow-y: auto;
  
  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(24, 144, 255, 0.3);
    border-radius: 3px;
  }
`;

const AlertItem = styled.div<{ priority: 'high' | 'medium' | 'low' }>`
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  background: ${props => 
    props.priority === 'high' ? 'rgba(255, 77, 79, 0.2)' : 
    props.priority === 'medium' ? 'rgba(250, 173, 20, 0.2)' : 
    'rgba(24, 144, 255, 0.2)'
  };
  border-left: 4px solid ${props => 
    props.priority === 'high' ? '#ff4d4f' : 
    props.priority === 'medium' ? '#faad14' : 
    '#1890ff'
  };
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
`;

const AlertTitle = styled.div`
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const AlertTime = styled.div`
  font-size: 12px;
  color: #a0cfff;
  font-weight: normal;
`;

const AlertDescription = styled.div`
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 5px;
`;

const AlertLocation = styled.div`
  font-size: 12px;
  color: #a0cfff;
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const AlertStatus = styled.span<{ status: 'active' | 'processing' | 'resolved' }>`
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  background: ${props => 
    props.status === 'active' ? 'rgba(255, 77, 79, 0.7)' : 
    props.status === 'processing' ? 'rgba(250, 173, 20, 0.7)' : 
    'rgba(82, 196, 26, 0.7)'
  };
  color: white;
`;

const AlertBadge = styled.div<{ priority: 'high' | 'medium' | 'low' }>`
  position: absolute;
  width: 8px;
  height: 8px;
  top: -4px;
  left: -4px;
  border-radius: 50%;
  background-color: ${props => 
    props.priority === 'high' ? '#ff4d4f' : 
    props.priority === 'medium' ? '#faad14' : 
    '#1890ff'
  };
  box-shadow: 0 0 3px ${props => 
    props.priority === 'high' ? 'rgba(255, 77, 79, 0.8)' : 
    props.priority === 'medium' ? 'rgba(250, 173, 20, 0.8)' : 
    'rgba(24, 144, 255, 0.8)'
  };
  
  animation: ${props => props.priority === 'high' ? 'pulse 1s infinite' : 'none'};
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(255, 77, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
  }
`;

const EmptyContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgba(160, 207, 255, 0.5);
  font-size: 14px;
`;

// 警报类型接口定义
interface Alert {
  id: number;
  title: string;
  description: string;
  location: string;
  time: string;
  priority: 'high' | 'medium' | 'low';
  status: 'active' | 'processing' | 'resolved';
}

// 模拟警报数据
const mockAlerts: Alert[] = [
  {
    id: 1,
    title: '无人机入侵禁飞区',
    description: '检测到未授权无人机进入核心禁飞区域',
    location: '坐标: 113.0823°, 22.5801°',
    time: '2分钟前',
    priority: 'high',
    status: 'active'
  },
  {
    id: 2,
    title: '无人机信号丢失',
    description: '巡逻无人机DRONE-003信号中断',
    location: '最后坐标: 113.0623°, 22.5500°',
    time: '10分钟前',
    priority: 'medium',
    status: 'processing'
  },
  {
    id: 3,
    title: '监控区域信号异常',
    description: '监控区A信号强度低于阈值',
    location: '监控区A',
    time: '25分钟前',
    priority: 'low',
    status: 'processing'
  },
  {
    id: 4,
    title: '天气预警',
    description: '未来2小时可能有雷暴天气',
    location: '江门市区',
    time: '30分钟前',
    priority: 'medium',
    status: 'active'
  },
  {
    id: 5,
    title: '传感器电量不足',
    description: '3个气象传感器电量低于20%',
    location: '监控区B',
    time: '1小时前',
    priority: 'low',
    status: 'resolved'
  }
];

// 获取优先级图标
const getPriorityIcon = (priority: 'high' | 'medium' | 'low') => {
  switch (priority) {
    case 'high':
      return '🔴';
    case 'medium':
      return '🟠';
    case 'low':
      return '🔵';
    default:
      return '⚪';
  }
};

export default function AlertsPanel() {
  const [alerts, setAlerts] = useState<Alert[]>(mockAlerts);

  // 模拟实时更新警报
  useEffect(() => {
    const updateInterval = setInterval(() => {
      // 获取当前时间
      const now = new Date();
      
      // 更新警报的时间描述
      const updatedAlerts = alerts.map(alert => {
        const alertDate = new Date(now);
        let timeAgo: string;
        
        if (alert.time.includes('分钟前')) {
          const minutes = parseInt(alert.time) + 1;
          alertDate.setMinutes(now.getMinutes() - minutes);
          
          if (minutes < 60) {
            timeAgo = `${minutes}分钟前`;
          } else {
            const hours = Math.floor(minutes / 60);
            timeAgo = `${hours}小时前`;
          }
        } else if (alert.time.includes('小时前')) {
          const hours = parseInt(alert.time) + 1/60;
          timeAgo = `${Math.floor(hours)}小时前`;
        } else {
          timeAgo = alert.time;
        }
        
        return {
          ...alert,
          time: timeAgo
        };
      });
      
      setAlerts(updatedAlerts);
      
      // 随机添加新警报 (5%概率)
      if (Math.random() < 0.05) {
        const priorities: ('high' | 'medium' | 'low')[] = ['high', 'medium', 'low'];
        const statuses: ('active' | 'processing' | 'resolved')[] = ['active', 'processing', 'resolved'];
        
        const newAlert: Alert = {
          id: Date.now(),
          title: `新警报 #${Math.floor(Math.random() * 1000)}`,
          description: '系统检测到新的异常情况',
          location: `坐标: ${(113 + Math.random() * 0.1).toFixed(4)}°, ${(22.5 + Math.random() * 0.1).toFixed(4)}°`,
          time: '刚刚',
          priority: priorities[Math.floor(Math.random() * priorities.length)],
          status: statuses[Math.floor(Math.random() * statuses.length)]
        };
        
        setAlerts(prev => [newAlert, ...prev].slice(0, 8)); // 保持最多8条警报
      }
    }, 10000);
    
    return () => clearInterval(updateInterval);
  }, [alerts]);

  return (
    <AlertsContainer>
      <AlertsList>
        {alerts.length === 0 ? (
          <EmptyContainer>
            暂无预警信息
          </EmptyContainer>
        ) : (
          alerts.map(alert => (
            <AlertItem key={alert.id} priority={alert.priority}>
              <AlertTitle>
                <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
                  <AlertBadge priority={alert.priority} />
                  {getPriorityIcon(alert.priority)} {alert.title}
                </div>
                <AlertTime>{alert.time}</AlertTime>
              </AlertTitle>
              <AlertDescription>{alert.description}</AlertDescription>
              <AlertLocation>
                <span>{alert.location}</span>
                <AlertStatus status={alert.status}>
                  {alert.status === 'active' ? '活跃' : 
                   alert.status === 'processing' ? '处理中' : '已解决'}
                </AlertStatus>
              </AlertLocation>
            </AlertItem>
          ))
        )}
      </AlertsList>
    </AlertsContainer>
  );
} 